<template>
  <div>
    <div class="header">
      <span class="search-header">{{ title }}</span>
      <svg t="1662174050865" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2368" width="20" height="20"><path d="M512 958.016C266.08 958.016 65.984 757.952 65.984 512 65.984 266.08 266.08 65.984 512 65.984c245.952 0 446.016 200.064 446.016 446.016C958.016 757.952 757.952 958.016 512 958.016zM512 129.984C301.344 129.984 129.984 301.344 129.984 512c0 210.624 171.36 382.016 382.016 382.016 210.624 0 382.016-171.36 382.016-382.016C894.016 301.344 722.624 129.984 512 129.984z" p-id="2369" fill="#1296db"></path><path d="M512 304m-48 0a1.5 1.5 0 1 0 96 0 1.5 1.5 0 1 0-96 0Z" p-id="2370" fill="#1296db"></path><path d="M512 768c-17.664 0-32-14.304-32-32l0-288c0-17.664 14.336-32 32-32s32 14.336 32 32l0 288C544 753.696 529.664 768 512 768z" p-id="2371" fill="#1296db"></path></svg>
    </div>
    <div style="margin-top: 5px;">
      <span style="font-size:20px">{{ searchData }}</span>
      <span class="icon-span" v-if="flag==0"> 23.23%<i class="el-icon-caret-top" style="color:red"></i></span>
      <span class="icon-span" v-else> -14.53%<i class="el-icon-caret-bottom" style="color:green"></i></span>
    </div>
<!--    echart-->
    <div class="main" ref="main" ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "Echart",
  props:['title','searchData','echartData','flag'],
  data(){
    return{
      echart:null,
  }},
  mounted () {
    this.echart=echarts.init(this.$refs.main)
    this.echart.setOption({
      xAxis:{
        type:'category',
        show:false,
      },
      yAxis:{
        show:false,
      },
      // 布局调试
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
      },
      series:[
        {
          type:'line',
          // data: [5, 20, 25, 10, 10, 20,12,4,13,21],
          data:this.echartData,
          // data:this.searchData.count,
          smooth:true,
          lineStyle:{
            color:'#ee6666',
          },
          itemStyle:{
            opacity:0,
          },
          areaStyle:{
            color:{
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#ee6666' // 0% 处的颜色
              }, {
                offset: 1, color: '#ccc' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          },
        }
      ],
    })
  },
  watch:{
    echartData(){
      this.echart.setOption({
        series:[{
          data:this.echartData,
        }]
      })
    },
  },
}
</script>

<style scoped>
.header{
  display: flex;
  align-items: center;
}
.search-header{
  margin-right: 55px;
}
.icon-span{
  margin-left:100px;
}
.main{
  width: 100%;
  height: 50px;
  padding-top: 10px;
}
</style>
